<template>
  <div class="all">
    <div class="top">
      <Header title="团队通讯录"
              @click-left="back"></Header>
      <div class='tabBar' v-show="select == 1">
        <div class='tab' :class="{'act':select===1}"
        @click="select = 1">
          按组织架构查询
          <p class='line'></p>
        </div>
        <div  class='tab' :class="{'act':select===2}"
        @click="select = 2">
          按姓名查询
          <p class='line'></p>
        </div>
      </div>
    </div>
    <div v-show="select == 1">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          class="treeChilden"
          :title="item.group_name" :name="item.id"
                           v-for="(item, index) in teamTreeList"
                           :key="index">
          <template #icon>
            <img src="../../../../assets/组织架构灰.png" class="teamImg" alt="">
          </template>
          <van-collapse-item
            :title=" People.doc_user_id == item.leader_doc_user_id ? People.NICK_NAME + '(组长)' : People.NICK_NAME "
            :name="People.id"
            :is-link="false"
            @click.native="runChat(People)"
            v-for="(People, peopleIndex) in item.members" :key="peopleIndex">
          <template #icon>
            <img src="../../../../assets/男医生@2x.png" class="photo" alt="">
          </template>
          </van-collapse-item>
          <van-collapse-item
            :name="group.id"
            :title="group.group_name"
            v-for="(group, groupIndex) in item.groups" :key="groupIndex">
            <template #icon>
              <img src="../../../../assets/组织架构灰.png" class="teamImg" alt="">
            </template>
            <van-collapse-item
              v-if="group.members"
              :name="People.id"
              :title="People.doc_user_id == group.leader_doc_user_id ? People.NICK_NAME + '(组长)' : People.NICK_NAME"
              :is-link="false"
              @click.native="runChat(People)"
              v-for="(People, peopleIndex) in group.members" :key="peopleIndex">
              <template #icon>
                <img src="../../../../assets/男医生@2x.png" class="photo" alt="">
              </template>
            </van-collapse-item>
          </van-collapse-item>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div v-show="select == 2">
      <van-index-bar
        v-if="doctorList.length > 0"
        highlight-color="#1da4f2"
        :index-list="indexList">
        <div v-for="(item, index) in doctorList" :key="index">
          <van-index-anchor :index="item.zimu" />
          <div class="divList"
               @click="runChat(curr)"
               v-for="(curr, i) in item.zimu_list" :key="i">
            <img v-if="curr.PHOTO"
                 class="photo"
                 :src="curr.PHOTO" alt="">
            <img v-else src="../../../../assets/photo.png"
                 class="photo"
                 alt="">
            &nbsp;
            &nbsp;
            <p>
              {{curr.NICK_NAME}}
              &nbsp;
              {{curr.sex == 1 ? '男' : '女'}}
            </p>
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import Header from '../../../../components/Vue/Header'
export default {
  name: 'TeamChat',
  components: {
    Header
  },
  data () {
    return {
      team_id: this.$route.query.team_id,
      select: 2,
      teamTreeList: [],
      doctorList: [],
      indexList: [],
      activeNames: ['1']
    }
  },
  watch: {
    // select (newVal, oldVal) {
    //   if (newVal == 1) {
    //     this.getTeam()
    //   } else if (newVal == 2) {
    //     this.getDoctorList()
    //   }
    // }
  },
  mounted () {
    this.getTeam()
    this.getDoctorList()
  },
  methods: {
    getTeam () {
      this.$http.treeGroup({
        team_id: this.team_id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.teamTreeList = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getDoctorList () {
      this.doctorList = []
      this.indexList = []
      this.$http.findDoctor({team_id: this.team_id, isSort: '1'})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            data.forEach((curr) => {
              this.indexList.push(curr.spell_sort.toUpperCase())
            })
            this.indexList = new Array(...new Set(this.indexList))
            this.indexList.forEach((item) => {
              let list = {
                zimu: item,
                zimu_list: []
              }
              data.forEach((curr, index) => {
                if (item === curr.spell_sort.toUpperCase()) {
                  list.zimu_list.push(curr)
                }
              })
              this.doctorList.push(list)
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    runChat (item) {
      let name = ''
      let userid = ''
      if (item.NICK_NAME) {
        name = item.NICK_NAME
      }
      if (item.USER_ID) {
        userid = item.USER_ID
      } else {
        userid = item.doc_user_id
      }
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('doctorPatientChat', userid + ',' + name + ',' + '4' + ',' + '0', function (responseData) {})
      } else {
        this.$toast('请在App上使用本功能')
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.top{
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 9999;
}
.tabBar{
  width: 100%;
  height: 44px;
  overflow: hidden;
  background-color: white;
  display: flex;
  //div{
  //  flex: 1;
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //}

  .tab{
    flex: 1;
  float: left;
  font-size: 15px;
  color: #333333;
  line-height: 44px;
  text-align: center;
  position: relative;

    .line{
      display: none;
      width: 25px;
      height: 2px;
      border-radius: 1px;
      background-color: #1DA4F2;
      position: absolute;
      left: 50%;
      bottom: 5px;
      transform: translateX(-50%);
    }

    &.act{
       color: #1DA4F2;
      .line{
        display: block;
      }
    }
  }
}
.divList{
  width: 100%;
  height: 55px;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  p{
    display: flex;
    align-items: center;
    height: 100%;
    flex: 2;
    border-bottom: 1px solid #E5E5E5;
  }
}
.photo{
  width: 37.5px;
  height: 37.5px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E5E5E5;
}
/deep/ .van-collapse-item__content{
  padding: 0;
}
.treeChilden{
  /deep/ .van-collapse-item__content{
    padding-left: 15px;
    box-sizing: border-box;
  }
}
/deep/ .van-cell{
  display: flex;
  align-items: center;
  .van-cell__title{
    margin-left: 8px;
  }
}
.teamImg{
  width: 16px;
  height: 16px;
}
</style>
